<template>
  <div class="reports">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <div ref="main" id="box"></div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { CanvasRenderer } from "echarts/renderers";
import { getReports } from "@/tools/ajax";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
import * as echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from "echarts/components";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  LegendComponent
]);
let myChart;
const main = ref(null);
function mainResize() {
  myChart.resize();
}
onMounted(async () => {
  myChart = echarts.init(main.value);
  getReports().then(res => {
    if (res.meta.status != 200) {
      ElMessage.error(res.meta.msg);
    } else {
      res.data.series.forEach(item => {
        item.areaStyle = {};
      });
      res.data.title = { text: "客户来源" };
      res.data.tooltip = {};
      myChart.setOption(res.data);
      window.addEventListener("resize", mainResize);
    }
  });
});
onUnmounted(() => {
  // 取消window事件
  window.removeEventListener("resize", mainResize);
});
</script>

<style scoped>
#box {
  width: 100%;
  height: calc(100vh - 180px);
}
</style>